<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="showTel">查看联系方式</button>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
// 数据
let name = ref('张三'); // 响应式的
let age = ref(18);
let telephone = '15012346868'; // 不是响应式的

// 方法
function showTel() {
  alert(telephone);
}
function changeName() {
  name.value = '张三三'; // 需要通过value属性去修改
}

function changeAge() {
  age.value += 1;
}
</script>
<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>